<template>
  <el-container class="allpage">
    <el-row class="position-fixed">
    </el-row>
    <el-container>
      <el-aside class="lyqboaside2">
        <div class="lyqaside-content">
        <div class="lyqaside-left">
          <div>


<!--          <div class="zuoshang">-->

            <div class="lyqzuoce">
              <el-row :gutter="10">
                <el-col :span="6"><el-button type="primary"  plain @click="centerDialogVisible = true,zhuangtai=0"  class="lyqadd_btn1" >输入员工号</el-button></el-col>
              </el-row>

              <el-row >
                <el-col :span="3">
                  <div style="display: block;">
                    <span  style="display: block; margin-top: 22px;"class="lyqm1">员工：</span>
                  </div>
                </el-col>
                <el-col :span="5">
                  <el-input
                    class="lyqinput"
                    :disabled = "true"
                    style="width: 100px; height: 40px;"
                    v-model="this.base.userName"
                  ></el-input>
                </el-col>
                <el-col :span="3">
                  <div style="display: block;">
                    <span  style="display: block; margin-top: 22px;"  class="lyqm">手牌号：</span>
                  </div>
                </el-col>
                <el-col :span="5">
                  <el-input
                    class="lyqinput"
                    v-model="batai.handBrand"
                    :disabled = "true"
                    style="width: 100px; height: 40px;"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-dialog
            :visible.sync="open"
            :showClose="false"
            width="50%"
            center
          >
            <div class="lyqtanchu1">
              商品已在列表中还需再点？
              <el-row>
                <el-col :span="12">
                  <el-button   style="float: left" class="lyqbuttonqueding" type="danger" @click.prevent.stop.native="quxiao" plain >取消</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button   style="float: left" class="lyqbuttonqueding" type="danger" @click.prevent.stop.native="queding1" plain >确定</el-button>
                </el-col>
              </el-row>
            </div>
          </el-dialog>

          <!--          展示商品表格-->
          <div class="scroll">
            <el-table
              :cell-class-name="tableRowClassName"
              :show-header="false"
              :data="detailsList"
              empty-text = "玉泉宫"
              height="400"
              border
              style="width: 1150px"
              class="listtable">
              <el-table-column
                prop="entryName"
                label="商品名称"
                width="180" align="center">
              </el-table-column>
              <el-table-column
                prop="quantity"
                label="购买数量" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.quantity }}个</div>
                </template>

              </el-table-column>
              <el-table-column
                sortable
                label="消费金额" align="center">
                <template slot-scope="scope">
                  <div >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-button type="warning" plain @click="jianshao(scope.row.index)">减少</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="lyqqueren" type="primary" plain  @click="table= true;getbataiList();getCurrentTime()">点单</el-button>
          <el-button class="lyqqueren"  type="primary"  plain  @click.prevent.stop.native="reback">清空</el-button>
<!--          <el-button class="lyqqueren"  type="primary"  plain  @click.prevent.stop.native="fanhui">返回</el-button>-->
        </div>

          <!--分类条-->
          <div class="lyqaside-right">
            <div>
            <div class="lyqzhonglei">
              <el-card v-show="this.sex==0" class="lyqfirst" style="font-size: 18px" @click.prevent.stop.native="projectCateory('09')">
                <span class="lyqjuzhong">男宾助浴</span>
              </el-card>

              <el-card v-show="this.sex==1" class="lyqfirst" style="font-size: 18px" @click.prevent.stop.native="projectCateory('10')">
                  <span class="lyqjuzhong">女宾助浴</span>
              </el-card>
              <el-card class="first8" style="font-size: 18px" @click.prevent.stop.native="projectCateory('11')">
                <span class="lyqjuzhong">中医</span>
              </el-card>
            </div>
              <div class="lyqbuju">


            </div>
          </div>
        </div>
        </div>
      </el-aside>
<!--      商品展示-->
      <el-container>
        <el-main class="lyqmain">
          <div class="lyqzhanshi"
               v-loading="loading">
            <el-row
              class="button-list2"
              v-for="rows in branchData"
            >
              <el-col v-for="cols in rows" :span="6">
                <el-button plain
                           style="height: 123px;width: 215px;margin-top: 3px;padding: 0;"
                           type="primary"
                           class="button1"
                           @click.prevent.stop.native="handleAdddetail(cols.id)"
                >
                  <div>{{cols.entryName}}</div>
                  <div>{{cols.unitPrice}}</div>
                </el-button>
              </el-col>
            </el-row>


          </div>
          <div class="dibu">
            <el-row :gutter="7">
              <el-col :span="18"> <el-button class="leibie1" type="success" plain  @click.prevent.stop.native="shangyiye">上一页</el-button></el-col>
              <el-col :span="6">  <el-button class="leibie2" type="success"  plain  @click.prevent.stop.native="xiayiye">下一页</el-button></el-col>
            </el-row>


          </div>
          <!--          软键盘-->
<!--          <el-dialog-->
<!--            title="请输入员工号"-->
<!--            :visible.sync="centerDialogVisible"-->
<!--            width="50%"-->
<!--            center>-->
<!--            <Verify @comfirm="hao"></Verify>-->

<!--          </el-dialog>-->
          <el-dialog :visible.sync="centerDialogVisible"   width="70%"  :showClose="false"    center>
            <el-card class="lyqcard">
              <div class="el-dialog-div">
                <Verify @comfirm="hao" :inputName="this.handbrandnumber"></Verify>
              </div >
            </el-card>
          </el-dialog>

          <!--          打印小票-->
          <div class="shaodrawer" style="z-index: -9999;position: fixed;top: -10000px;left: 0;width: 240mm">
            <div class="drawerleft">

              <div id="printAre" class="lyqxiaopiaocard" :data="detailsList" >
  <span style="margin-top:10px;text-align: left;font-size: 40px;font-family: '楷体', KaiTi, serif;" >
    玉泉宫欢迎您!
  </span>
                <!--            <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->

                <table  style="width: 100%;" >
                  <tr>
                    <td style="text-align: center;font-family: '楷体';width: 20%">项目名称</td>
                    <!--                <td style="text-align: center;font-family: '楷体';">数量</td>-->
                    <td style="text-align: center;font-family: '楷体';width: 20%">单价</td>
                    <td style="text-align: center;font-family: '楷体';width: 20%">合计</td>
                    <td style="text-align: center;font-family: '楷体';width: 20%">时间</td>
                  </tr>
                  <tr v-for="rows in detailsList" >
                    <td  style="text-align: center;font-family: '楷体';width: 20%">{{rows.entryName}}</td>
                    <!--                <td style="text-align: center;font-family: '楷体';">{{rows.quantity}}</td>-->
                    <td style="text-align: center;font-family: '楷体';width: 20%">{{rows.unitPrice}}x{{rows.quantity}}</td>
                    <td style="text-align: center;font-family: '楷体';width: 20%">{{rows.totalAmount}}元</td>
                    <td style="text-align: center;font-family: '楷体';width: 20%">{{currentTime}}</td>
                  </tr>
                </table>

                <!--            <div style="margin-top:1px;border-top: 4px solid #ccc;"></div>-->
                <div style="font-family: '楷体'" >当前日期:{{currentDate}}</div>
                <div style="font-family: '楷体'" >当前时间:{{currentTime}}</div>
                <div style="font-family: '楷体'" >地址:锦州市凌河区玉泉宫</div>
                <div style="font-family: '楷体'" >电话:1234567890</div>

              </div>

            </div>
          </div>

          <!--          抽屉-->
          <el-drawer
            style="font-size: 40px;text-align: center"
            title="请仔细核对订单"
            :visible.sync="table"
            direction="rtl"
            size="60%">
            <el-table :data="detailsList":header-cell-style="{textAlign:'center',fontSize: '19px',background:'#eef1f6',color:'#606266'}"
                      :cell-style="{textAlign: 'center'}" height="500" class="aa"
                      empty-text = "玉泉宫" :show-header="false">
              <el-table-column property="handBrand"  label="手牌号" width="250px">
                <template slot-scope="scope">
                  <div>{{ scope.row.index+1 }}</div>
                </template>
              </el-table-column>
              <el-table-column property="entryName" label="商品名称" width="250px">
                <template slot-scope="scope">
                  <div>{{ scope.row.entryName }}</div>
                </template>
              </el-table-column>
              <el-table-column property="quantity" label="数量" width="250px">
                <template slot-scope="scope">
                  <div >{{ scope.row.quantity }}个</div>
                </template>
              </el-table-column>
              <el-table-column property="totalAmount" label="合计金额" width="250px">
                <template slot-scope="scope">
                  <div >{{ scope.row.totalAmount }}元</div>
                </template>
              </el-table-column>

            </el-table>
            <div class="container">
              <el-button style="float: left" class="add_btn3" type="success" plain @click="addFormm">提交</el-button>
            </div>
          </el-drawer>
        </el-main>

      </el-container>

<!--          <el-row :gutter="10">-->
<!--            <el-col :span="8">  <el-button type="primary"  class="query2" plain  @click="addFormm">提交</el-button></el-col>-->
<!--&lt;!&ndash;            <el-col :span="8"> <el-button class="query2" type="primary" size="medium" @click="addFormm">提交</el-button></el-col>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-col :span="8"><el-button class="query3" type="primary" size="medium" @click="reback">清空</el-button></el-col>&ndash;&gt;-->
<!--            <el-col :span="8">  <el-button type="primary"  class="query3" plain  @click="reback">清空</el-button></el-col>-->
<!--          </el-row>-->
<!--        </div>-->




    </el-container>
  </el-container>
</template>

<script>
import { listDetails, getDetails, delDetails, addDetails, updateDetails } from "@/api/module/lyq/detail";
import { listProject, getProject, delProject, addProject, updateProject } from "@/api/module/lyq/project";
import { listBaseinfo, getBaseinfo, delBaseinfo, addBaseinfo, updateBaseinfo } from "@/api/module/lyq/baseinfo";
import { listBills, getBills, delBills, addBills, updateBills,ppp } from "@/api/module/lyq/bills";
import Verify from "./Verify.vue";
import printJS from "print-js";
// import "./App.css";

export default {
  name: "App",
  components: {
    Verify
  },
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
      currentTime: '',
      zan:'',
      currentDateTime: '',
      table: false,
      centerDialogVisible: false,
      input: "",
      sex:"",
      chuanzhi:null,

      // 选中数组
      ids: [],
      open: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      zhuangtai: 0,
      mm: '',
      // 消费详细表格数据
      detailsList: [],
      // 吧台账单表格数据
      billsList: [],
      // 商品数据
      projectList:[],
      branchData:[],
      goodsList:[],
      baseinfoList:[],
      tableData1:[],
      tableData2:[],
      //人员信息表数据
      personList:[],
      //手牌表数据
      handsList:[],
      //展示已点
      List1: {
        entryName: null,
        quantity:null,
        handBrand: null,
        handCategory: null,
        handState: 1,
        lockedState: null,
        //库中数据字段为1才是商品
        projectCategory:null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      loading:false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      // open: false,
      //查询项目信息表参数
      projectinformations:{
        pageNum: 1,
        pageSize: 24,
        entryName: null,
        projectCategory: '03',
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 查询吧台表的参数
      batai: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        department: null,
        userName: null,
        post: null,
        handBrand: null,
        originalHand: null,
        handCategory: null,
        retentionStatus: null,
        mergeStatus: null,
        handState: 1,
        numberOfPeople: null,
        allCost: null,
        openingTime: null,
        groupId: null,
        oddNumbers: null,
        children: null,
        mastercard: null,
        handoverTime: null,
        handoverStatus: null,
        barNumber: null,
        sailings: null,
        together: null,
        note: null,
        groupNotes: null,
        discountAmount: null,
        checkoutTime: null,
        supplementaryConsumption: null,
        paidInAmount: null,
        paidInCash: null,
        changeAmount: null,
        paymentMethod: null,
        totalConsumptionAmount: null,
        cardiner: null,
        checkout: null,
        frontSign: null,
        frontPrintTime: null,
        operator: null,
        checkoutLocation: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 技师表查询参数
      base: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        nickName: null,
        userName: null,
        idNumber: null,
        sex: null,
        phone: null,
        post: null,
        department: null,
        personnelStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.batai.handBrand=this.$route.query.handBrand
    this.chuanzhi=this.$route.query.handBrand
    // this.base.userName=this.$route.query.userName
    // console.log(this.base.userName)
    this.getbataiList();
    // this.centerDialogVisible=true;
  },
  mounted () {
    this.getRow();
    this.$refs.myInputsec.$refs.input.style.fontSize = "32px";
      this.$refs.myInputsecs.$refs.input.style.fontSize = "32px";
  },
  methods: {
    quxiao(){
      this.open=false;
    },
    queding1(){
      var i=this.zan;
      console.log(i);
      this.detailsList[i].quantity = parseFloat(this.detailsList[i].quantity) + 1
      this.detailsList[i].totalAmount = this.detailsList[i].quantity * this.List1.unitPrice
      this.open=false;
    },
    // 获取点击行的索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //减少商品数量
    jianshao(index){
      this.detailsList[index].quantity-=1;
      this.detailsList[index].totalAmount=this.detailsList[index].quantity*this.List1.unitPrice;
      if(this.detailsList[index].quantity==0){
        this.detailsList.splice(index,1);
      }
    },
    /** 查询项目信息列表 */
    getprojectList1() {
      this.loading = true;
      listProject(this.projectinformations).then(response => {
        this.goodsList = response.rows;
        this.getRow();
        this.total = response.total;
        this.loading = false;
      });
    },
    //根据字段不同数字进行分类
    projectCateory(cateory){
      if (this.zhuangtai==1)
      {
        this.mm=cateory;
        console.log(this.mm)
        this.projectinformations.firstLevelClassification=cateory;
        console.log(cateory);
        this.flag = cateory;
        this.getprojectList1();
      }
else {
        this.$modal.msgError("请先读取员工号");
      }
    },

    //获取当前时间
    getCurrentTime() {
      const date = new Date();
      // const year = date.getFullYear();
      // const month = date.getMonth() + 1; // 注意月份从0开始，需要加1
      // const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      // const seconds = date.getSeconds();
      const h = String(hours).padStart(2, '0');
      const m = String(minutes).padStart(2, '0');
      // const s = String(seconds).padStart(2, '0');
      this.currentTime = `${h}:${m}`;
    },
    // 上一页
    shangyiye(){
      if(this.mm=='09'){
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations.pageNum = 1;
        }
        this.getprojectList();
      }
      if(this.mm=='10'){
        this.projectinformations.pageNum -= 1;
        if (this.projectinformations.pageNum == 0) {
          this.$modal.msgError("第一页");
          this.projectinformations.pageNum = 1;
        }
        this.getprojectList();
      }
    },

    // 下一页
    xiayiye(){

      if(this.mm=='09'){
        this.projectinformations.pageNum+=1;
        if(this.projectinformations.pageNum==4){
          this.$modal.msgError("最后一页了！");
          this.projectinformations.pageNum=3;
        }
        this.getprojectList1();
      }
      if(this.mm=='10'){
        this.projectinformations.pageNum+=1;
        if(this.projectinformations.pageNum==9){
          this.$modal.msgError("最后一页了！");
          this.projectinformations.pageNum=8;
        }
        this.getprojectList1();
      }
    },



queding(){
  this.getprojectList();
},
    //==================================================================================================================
    //查询=================================================================================================================

    /** 查询吧台账单列表 */
    getbataiList() {
      this.loading = true;
      listBills(this.batai).then(response => {
        this.billsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目信息列表 */
    getProjectList1(){
        this.loading = true;
        listProject(this.projectinformations).then(response => {
          this.goodsList = response.rows;
          this.getRow();
          this.total = response.total;
          this.loading = false;
        });
      },
    getprojectList() {
      // this.base.userName=this.$route.query.NUM;
      if (this.base.userName==null)
      {
        this.$modal.msgError("请输入员工号");
      }
      else {
        listBaseinfo(this.base).then(response => {
          this.baseinfoList = response.rows;
          if (this.baseinfoList.length==0)
          {
            this.$modal.msgError("请输入正确的员工号");
          }
          else {
            this.zhuangtai=1;
            if (this.baseinfoList[0].sex==0)
            {
              this.sex=0;
              this.projectinformations.firstLevelClassification='09'
              this.mm='09'
              listProject(this.projectinformations).then(response => {
                this.goodsList = response.rows;
                this.getRow();
              });
            }
            else {
              this.sex=1
              this.projectinformations.firstLevelClassification='10'
              this.mm='10'
              listProject(this.projectinformations).then(response => {
                this.goodsList = response.rows;
                this.getRow();

              });
            }
          }


        });
      }

    },

    hao(k){
      this.base.userName=k;
      this.queding();
      this.opentd=false;
      this.centerDialogVisible=false;
    },
    reback(){
      //重置已点商品表单
      this.detailsList=[];
      //重置手牌表单
      this.getprojectList2();
    },
    fanhui(){
      this.$router.push({path:'/cuozao/paihao'});
    },

    // 添加商品不进库操作
    handleAdddetail(id) {
      getProject(id).then(response => {
        this.List1 = response.data;
        this.List1.handBrand = this.batai.handBrand;
        if(this.detailsList.length===0){
          this.detailsList.push({
            entryName:this.List1.entryName,
            handBrand:this.List1.handBrand,
            handState:this.List1.handState,
            projectCategory:this.List1.projectCategory,
            quantity:1,
            totalAmount:this.List1.unitPrice,
          })
          console.log("aaa")
          console.log(this.detailsList[0].handBrand)
        }
        else{
          for (let i = 0; i < this.detailsList.length; i++) {
            if(this.detailsList[i].entryName === this.List1.entryName){
              this.open=true;
              this.zan=i;
              break;
              break
            }else{
              if(i===this.detailsList.length-1){
                this.detailsList.push({
                  entryName:this.List1.entryName,
                  handBrand:this.List1.handBrand,
                  projectCategory:this.List1.projectCategory,
                  quantity:1,
                  totalAmount:this.List1.unitPrice,
                })
                i++
              }
            }
          }
        }
      })
        // .catch((err)=>{
        //   this.$modal.msgError("请输入手牌号");
        // });
    },
// 分包函数
    getRow () {
      let arr = [];
      let row = Math.ceil(this.goodsList.length / 4);
      //  行循环
      for (let i = 0; i < row; i++) {
        //  第i行的商品
        arr[i] = [];
        // modLast：最后一行的商品个数
        let modLast = this.goodsList.length % 4 === 0 ? 4 : this.goodsList.length % 4;
        // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
        let lastRow = i === (row - 1) ? modLast : 4;
        //  列循环
        for (let j = 0; j < lastRow; j++) {
          arr[i][j] = this.goodsList[4 * i + j];
        }
      }
      //  最后得到arr数组，将数组赋值给一个变量
      this.branchData= arr;
    },
    // //将商品排放到右侧页面内
    // getRow () {
    //   let arr = [];
    //   let row = Math.ceil(this.goodsList.length / 6);
    //   //  行循环
    //   for (let i = 0; i < row; i++) {
    //     //  第i行的商品
    //     arr[i] = [];
    //     // modLast：最后一行的商品个数
    //     let modLast = this.goodsList.length % 6 === 0 ? 6 : this.goodsList.length % 6;
    //     // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
    //     let lastRow = i === (row - 1) ? modLast : 6;
    //     //  列循环
    //     for (let j = 0; j < lastRow; j++) {
    //       arr[i][j] = this.goodsList[6 * i + j];
    //     }
    //   }
    //   //  最后得到arr数组，将数组赋值给一个变量
    //   this.branchData = arr;
    //   console.log(this.branchData);
    // },
    // 提交订单
    addFormm() {
      console.log(this.detailsList);
      //批量插入
      for(var i=0;i<this.detailsList.length;i++){
        this.detailsList[i].userName=this.base.userName;
        this.detailsList[i].nickName=this.baseinfoList[0].nickName;
        this.detailsList[i].post=this.baseinfoList[0].post;
        this.detailsList[i].department=this.baseinfoList[0].department;
        this.detailsList[i].userId=this.baseinfoList[0].userId;
        this.detailsList[i].deptId=this.baseinfoList[0].deptId;
        this.detailsList[i].handoverStatus=0;

        console.log(this.detailsList[i].userId)
        addDetails(this.detailsList[i]).then(response => {
          //重置已点商品表单
          this.detailsList=[];
          //重置手牌表单
          this.batai=[];
          console.log("搓澡的"+this.batai.handBrand)
          this.$router.push({path:'/cuozao/paihao',query:{handBrander:this.chuanzhi}});

        });}
      const style='@page{margin:0 1mm};'

      printJS({
        printable: printAre, // 'printFrom', // 标签元素id
        type: 'html',
        targetStyles: ['*'],
        page_size:"auto",
        style
      })
    }
  },

}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.allpage{
  margin-left: 5px;
}
.lyqboaside2 {
  margin-left: 10px;
  min-width: 50%;
  background: rgba(194,83,255,0);
}

.lyqzhonglei{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.lyqmain {
  height: 100%;
  margin-right: 10px;
  margin-top: 15px;
  width: 100%;
}
.lyqboaside2,.lyqmain{
  height: 100%;
}
.position-fixed{
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}
.listtable{
  margin-top: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
  font-size: 18px;
}
.aa{
  font-size: 25px;
}
.lyqadd_btn1{
  margin-left: 3px;
  margin-top: 9px;
  min-width: 160px;
  min-height: 80px;
  font-size: 20px;
  border: 3px solid #322d2d;
}
.lyqfirst{
  width: 170px;
  height: 90px;
  margin-top: 30px;
  margin-left: 5px;
  text-align: center;
  border: 4px solid #eab30d;
  border-top:none;border-bottom:none;
}
.first8{
  width: 170px;
  height: 90px;
  margin-top: 7px;
  margin-left: 5px;
  text-align: center;
  border: 4px solid #ea0d0d;
  border-top:none;border-bottom:none;
}
.lyqzhanshi{
  height: 760px;
  /*border: 1px solid rgba(116, 234, 13, 1);*/
}
.lyqbuju{
  margin-top: 40px;
  width: 180px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.lyqjuzhong{
  line-height:80px;
  font-size: 22px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.add_btn3{
  margin-top: 30px;
  min-width: 500px;
  min-height: 70px;
  right: 0px;
  font-size: 40px;

}
.button-list2 {
  text-align: center;
}
.lyqaside-content {
  display: flex; /* 设置弹性布局 */
  height: 100%;
}
.lyqzuoce{
  margin-top: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11), 0 0 6px rgba(0, 0, 0, 0.05);
}
.dibu{
  margin-top: 30px;
}
.lyqaside-left, .lyqaside-right {
  display: inline-block; /* 将 div 元素设置为行内块级元素 */
  height: 200px;
}
.lyqaside-left{
  height: 100%;
  width: 100%;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -23px;
}
.lyqaside-right {
  height: 400px;
  width: 24%;
}
.button1{
  font-size: 22px;
  border: 3px solid #9c26b0;
}
.lyqqueren{
  margin-top: 100px;
  margin-left:11px;
  font-size: 25px;
  width: 200px;
  height: 100px;
  border: 3px solid #322d2d;
}
.leibie1{
  margin-left:3px;
  font-size: 25px;
  width: 215px;
  height: 100px;
  border: 3px solid #322d2d;
}
.leibie2{
  font-size: 25px;
  width: 215px;
  height: 100px;
  border: 3px solid #322d2d;
}
.scroll {
  height: 400px; /* 设置固定高度 */
  /*overflow-y: auto; !* 设置纵向滚动条 *!*/
  font-size: 25px;
  margin-top: 60px;
  margin-right: 13px;
}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar{
  width: 0!important;height: 0;
}
.num{
  position: relative;
  left: -350px;
  right: -100px;
  top: 0;
}
.lyqm1{
  margin-left: 6px;
  margin-bottom: 20px;
  font-size: 20px;
}
.lyqm{
  font-size: 20px;
}
.lyqinput{
  margin-top: 22px;
  font-size: 20px;
}


.myInput .el-input__inner{
  border: none;
}

.no-border .el-input__inner { border: none; }
.lyqcard{
  width: 100%;
  margin-top: -40px;
}
.dibu1{
  display: block;
}
.shuliang{
  margin-left: 150px;
}
.lyqxiaopiaocard{
  font-size: 20px;
  height: 600px;
  width: 100%;
}
.xiaopiaocontent1{
  margin-left: 30px;
}
  .lyqtanchu1{
    text-align: center;
    font-size: 60px;
    margin-top: 50px;
    height: 350px;

  }
.lyqbuttonqueding{
  margin-left: 50px;
  font-size: 40px;
  min-width: 300px;
  min-height: 100px;
  margin-top: 150px;
}
.drawerleft {
  float: left;
  width: 40%;
}

.shaodrawer {
  width: 100%;
}
</style>

